<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
      xmlns:th = "http://www.thymeleaf.org">
<head>
  <title>Taco Cloud</title>
  <!-- Thymeleaf的@{}操作符，用来生成一个相对于上下文的路径，以便于引用我们需要的静态制品(artifact)。
   在Spring Boot应用中，静态内容要放到根类路径的“/static”目录下。-->
  <link rel = "stylesheet" th:href = "@{/styles.css}" />
</head>
<body>
  <h1>Design your taco!</h1>
  <!-- 退出功能，会话将被清理，这样就退出应用了 -->
  <form method="POST" th:action="@{/logout}">
    <input type="submit" value="Logout" />
  </form>
  <img th:src = "@{/images/TacoCloud.png}" alt="TacoCloud.png" />
  <!-- 通过th:object = "${taco}", th:field = "*{ingredients}"和th:field = "*{name}"，
  将form表单中这些输入域（即多个checkbox和一个文本输入框）直接对应Taco类的ingredients和name属性。 -->
  <!-- Spring Security提供了内置的CSRF保护。更幸运的是，它是默认启用的，不需要我们显式配置。我们唯一需要做的就是确保应用中的每个表单都要有一个名为“_csrf”的字段，它会持有CSRF令牌。
  在Thymeleaf模板中，我们可以按照如下的方式在隐藏域中渲染CSRF令牌：
  <input type = "hidden" name = "_csrf" th:value = "${_csrf.token}"/>
  使用Spring MVC的JSP标签库或者Spring Security的Thymeleaf方言时，甚至不用明确包含这个隐藏域，因为这个隐藏域会自动生成。
  在Thymeleaf中，只需要确保<form>元素的某个属性带有Thymeleaf的属性前缀。通常这并不是什么问题，因为我们一般会使用Thymeleaf渲染相对于上下文的路径。
  例如，为了让Thymeleaf渲染隐藏域，只需使用th:action属性： -->
  <form method = "POST" th:action="@{/design}" th:object = "${taco}">
    <div class = "grid">
      <div class = "ingredient-group" id = "wraps">
        <h3>Designate your wrap:</h3>
        <!-- 这里的wrap是从控制器拷贝到request属性中的数据模型中的attribute为wrap的集合？ -->
        <div th:each = "ingredient : ${wrap}">
          <!-- 这里的ingredients是Taco类中的ingredients属性？ -->
          <input th:field = "*{ingredients1}" type = "checkbox"
                 th:value = "${ingredient.id}"/>
          <span th:text = "${ingredient.name}">INGREDIENT</span><br/>
        </div>
      </div>

      <div class = "ingredient-group" id = "proteins">
        <h3>Pick your protein:</h3>
        <div th:each = "ingredient : ${protein}">
          <input th:field = "*{ingredients1}" type = "checkbox"
                 th:value = "${ingredient.id}"/>
          <span th:text = "${ingredient.name}">INGREDIENT</span><br/>
        </div>
      </div>

      <div class = "ingredient-group" id = "cheeses">
        <h3>Choose your cheese:</h3>
        <div th:each = "ingredient : ${cheese}">
          <input th:field = "*{ingredients1}" type = "checkbox"
                 th:value = "${ingredient.id}"/>
          <span th:text = "${ingredient.name}">INGREDIENT</span><br/>
        </div>
      </div>

      <div class = "ingredient-group" id = "veggies">
        <h3>Determine your veggies:</h3>
        <div th:each = "ingredient : ${veggies}">
          <input th:field = "*{ingredients1}" type = "checkbox"
                 th:value = "${ingredient.id}"/>
          <span th:text = "${ingredient.name}">INGREDIENT</span><br/>
        </div>
      </div>

      <div class = "ingredient-group" id = "sauces">
        <h3>Select your sauce:</h3>
        <div th:each = "ingredient : ${sauce}">
          <input th:field = "*{ingredients1}" type = "checkbox"
                 th:value = "${ingredient.id}"/>
          <span th:text = "${ingredient.name}">INGREDIENT</span><br/>
        </div>
      </div>
    </div>

    <div>
      <h3>Name your taco creation:</h3>
      <!-- 这里的name是Taco类中的name属性？ -->
      <input type = "text" th:field = "*{name}"/>
      <span class="validationError" th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Name Error</span>
      <br/>

      <button>Submit Your Taco</button>
    </div>
  </form>
</body>
</html>
No newline at end of file
